<template lang="html">
  <div class="container">
    <header>
      <div class="nabvar">
        <div class="nabvar-title">
          <div class="navbar-logo">
            <i class="material-icons">terrain</i>
            <span> Logo </span>
          </div>
        </div>
        <div class="navbar-nav">
          <transition name="fade">
            <ul v-if="!SEARCH_VISIBLE">
              <li><a href="#">首页</a></li>
              <li><a href="#">鲸闻</a></li>
              <li><a href="#">社区</a></li>
              <li><a href="#">兴趣小组</a></li>
              <li><a href="#">直播</a></li>
              <li><a href="#">甩甩尾巴</a></li>
              <li><a href="#">客户端</a></li>
            </ul>
          </transition>
          <transition name="slide">
            <div class="navbar-search" v-if="SEARCH_VISIBLE">
              <span><i class="material-icons">search</i></span>
              <input type="text" v-focus placeholder="搜索你感兴趣的.." >
              <span @click="visible()"><i class="material-icons">clear</i></span>
            </div>
          </transition>
        </div>
        <div class="navbar-menu">
          <ul>
            <li>
              <i
               class="material-icons"
               v-if="!SEARCH_VISIBLE"
               @click="visible()"
               >search</i>
            </li>
            <li>
              <!-- <i class="material-icons">notifications</i> -->
              <nuxt-link to="/login">登录</nuxt-link>
            </li>
            <li>
              <!-- <div
               class="avatar"
               @mouseenter="dropdownVisible()"
               @mouseleave="dropdownVisible()"
               >
                <img src="http://www.dgtle.com/uc_server/images/noavatar_small.gif">
                <v-dropdown-ul v-if="DROPDOWN_VISIBLE" class="dropdown-ul">
                  <v-dropdown-li icon="terrain">hahaha</v-dropdown-li>
                </v-dropdown-ul>
              </div> -->

            </li>
          </ul>
        </div>
      </div>
    </header>

    <section></section>
    <footer></footer>
  </div>
</template>

<script>

import { vDropdownUl, vDropdownLi } from '~/components/common'

export default {

  components: {
    vDropdownUl,
    vDropdownLi
  },
  data () {
    return {
      IS_HOVER: false,
      SEARCH_APPEAR: false,
      SEARCH_VISIBLE: false,
      DROPDOWN_VISIBLE: false
    }
  },
  methods: {
    visible () {
      this.SEARCH_VISIBLE = !this.SEARCH_VISIBLE
    },
    avatarVisible () {
      this.IS_HOVER = !this.IS_HOVER
    },
    dropdownVisible () {
      this.DROPDOWN_VISIBLE = !this.DROPDOWN_VISIBLE
    },
    DropdownVisible () {
      this.DROPDOWN_VISIBLE = true
    }
  },
  directives: {
    'focus': {
      inserted: function (el) {
        el.focus()
      }
    }
  }
}
</script>

<style lang="scss" scoped>

* {
  box-sizing: border-box;
}

.container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #eee;

  header {

    .nabvar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 60px;
      font-size: 14px;

      user-select: none;
      background-color: rgba(0, 0, 0, 0.8);

      .nabvar-title {

        position: absolute;
        left: 100px;

        .navbar-logo {
          display: flex;
          justify-content: space-around;

          width: 100px;
          height: 60px;
          cursor: pointer;

          i {
            color: #fff;
            font-size: 24px;
            line-height: 60px;
          }

          span {
            color: #fff;
            margin-top: 0;
            padding-top: 0;
            font-size: 18px;
            line-height: 60px;
          }
        }
      }

      .navbar-nav {

        width: 600px;
        margin: 0 auto;

        .navbar-search{
          position: absolute;
          top: 0px;
          height: 60px;
          display: flex;
          justify-content: space-around;
          align-items: center;

          width: 600px;

          span {
            display: block;
          }

          i {
            color: #9c9c9c;
            font-size: 28px;
            cursor: pointer;

            &:hover {
              color: #fff;
            }
          }

          span:nth-child(1) {

            i {
              color: #fefefe;
              font-size: 26px;
            }
          }

          input {
            width: 552px;
            height: 60px;
            border: 0px;
            color: #fff;
            font-size: 15px;
            caret-color: #fff;
            padding: 6px 12px;
            outline-color: transparent;
            background-color: transparent;
          }

          input::-webkit-input-placeholder {
           color: #9c9c9c;
           font-size: 14px;
         }
        }

        .slide-enter {
          transform: translateX(20%);
          opacity: 0;
        }

        .slide-enter-active {
          transition: .5s;
        }

        .slide-enter-to {
          transform: translateX(0%);
          opacity: 1;
        }
        .fade-enter {
          opacity: 0;
        }

        .fade-enter-active {
          transition: 1s;
        }

        .fade-enter-to {
          opacity: 1;
        }
        .fade-leave {
          opacity: 0;
        }

        .fade-leave-active {
          transition: 1s;
        }

        .fade-leave-to {
          opacity: 1;
        }

        ul {
          width: 600px;
          padding: 0;
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 60px;
          line-height: 60px;

          li {
            list-style: none;
            word-wrap: break-word;

            a {
              color: #9c9c9c;
              font-size: 15px;
              cursor: pointer;
              font-weight: 700;
              text-decoration: none;
              text-align: center;

              &:hover {
                color: #fff;
              }
            }
          }
        }
      }

      .navbar-menu {

        position: absolute;
        top: 0 ;
        right: 100px;

        ul {

          padding: 0;
          height: 60px;

          li {

            list-style: none;
            display: inline-block;
            margin: 0 20px;

            a {
              color: #9c9c9c;
              text-align: center;
              text-decoration: none;
              display: inline-block;
              line-height: 60px;
              height: 60px;
              vertical-align: super;

              &:hover {
                color: #fff;
              }
            }

            i {
              color: #9c9c9c;
              height: 60px;
              line-height: 60px;
              cursor: pointer;

              &:hover {
                color: #fff;
              }
            }
            .avatar {
              height: 44px;
              display: inline-block;

              img {
                width: 26px;
                height: 26px;
                border-radius: 13px;
                cursor: pointer;
              }

            }
          }
        }
      }
    }
  }
}
</style>
